<!-- quirks -->
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"/>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
	<meta name="renderer" content="webkit"/>
	<title>Promise</title>
	<link href="../ting-quirks.css" rel="stylesheet"/>
	<!--[if lt IE 9]><script src="../dist/sky-compat.js"></script><![endif]-->
	<!--[if gte IE 9]><!--><script src="../dist/sky-modern.js"></script><!--><![endif]-->
	<script src="../demo.js"></script>
</head>
<body>
<div class="container-fluid">
	<h3>Promise</h3>
	<p>Promise 对象用于异步计算。一个 Promise 表示一个现在、将来或永不可能可用的值。</p>
	<pre class="code">//基本用法
var promise1 = new Promise(function(resolve, reject) {
	setTimeout(function() {
		resolve('foo');
	}, 300);
});

promise1.then(function(value) {
	alert(value);
	// expected output: "foo"
});</pre>
	<div class="btn-toolbar">
		<a class="btn btn-primary" href="javascript:void 0;" onclick="run(this)">运行</a>
	</div>
	<pre class="code">//链式调用
var promise1 = new Promise(function(resolve, reject) {
	setTimeout(function() {
		resolve('1');
	}, 300);
});

promise1.then(function(value) {
	alert(value);// expected output: "1"
	return "2";
}).then(function(value) {
	alert(value);// expected output: "2"
});</pre>
	<div class="btn-toolbar">
		<a class="btn btn-primary" href="javascript:void 0;" onclick="run(this)">运行</a>
	</div>
	<pre class="code">//多步调用
function createPromise(value,time){
	return new Promise(function(resolve, reject) {
		setTimeout(function() {
			resolve(value);
		}, time);
	});
}

createPromise("step1",1000).then(function(value) {
	alert(value);// expected output: "step1"
	return createPromise("step2",1000);
}).then(function(value) {
	alert(value);// expected output: "step2"
});</pre>
	<div class="btn-toolbar">
		<a class="btn btn-primary" href="javascript:void 0;" onclick="run(this)">运行</a>
	</div>
	<pre class="code">//出现异常
function createPromise(value,time){
	return new Promise(function(resolve, reject) {
		setTimeout(function() {
			resolve(value);
		}, time);
	});
}

createPromise("step1",1000).then(function(value) {
	alert(value);// expected output: "step1"
	return createPromise("step2",1000);
}).then(function(value) {
	throw new Error("Example Error");
})['catch'](function(e){
	alert("catch");
});</pre>
	<div class="btn-toolbar">
		<a class="btn btn-primary" href="javascript:void 0;" onclick="run(this)">运行</a>
	</div>
	<pre class="code">//所有任务完成后
function createPromise(value,time){
	return new Promise(function(resolve, reject) {
		setTimeout(function() {
			resolve(value);
		}, time);
	});
}
Promise.all([
	createPromise("task1",600),
	createPromise("task2",2000),
	createPromise("task3",1000)
]).then(function(values) {
	alert(JSON.stringify(values));// expected output: ["task1","task2","task3"]
});</pre>
	<div class="btn-toolbar">
		<a class="btn btn-primary" href="javascript:void 0;" onclick="run(this)">运行</a>
	</div>
</div>
</body>
</html>